<script setup>
import KOheader from '@/components/KOheader/KOheader.vue'
import KOfooter from '@/components/KOfooter/KOfooter.vue'
import { ref, watch, onMounted } from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
const toLOGIN=()=>{
  router.push({
    path: '/LOGIN'
  })
}
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize)
</script>

<template>
  <div v-if="innerWidth">
    <KOheader/>
    <div style="margin: 50px auto; width: 400px;">
      <div style="font-size:25px;font-weight: 700;">註冊一個新帳戶</div>
      <button style="display: flex; align-items: center; justify-content:space-between;  margin-top:20px ; border:1px solid #eeecec; border-radius: 10px; width: 100%; height: 40px;background-color: #fff;">
        <img style="width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/fb_circle.png" alt="">
        <div>使用Facebook登入</div>
        <div></div>
      </button>
      <div style="margin-top:20px; text-align: center;">或</div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="text" placeholder="姓名＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="text" placeholder="電子信箱＊">
      </div>
      <div style="margin-top:20px ; color:#757575;">＊ 請以「小寫」填寫電子信箱。</div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="text" placeholder="確認電子信箱地址＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="password" placeholder="密码＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 100%; height: 40px;" type="password" placeholder="確認密碼＊">
      </div>
      <div style="margin-top:20px;">
        <div style="font-weight:700;">國家/地區</div>
        <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 29%; height: 40px;">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="japan">日本</option>
            <!-- 更多选项 -->
        </select>
        <input style="border:none;border-bottom:1px solid #afadad; width: 69%; height: 40px;" type="text" placeholder="手機＊"/>
      </div>
      <div style="margin-top:20px;">
      <div style="font-weight:700;">出生年月日</div>
      <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 29%; height: 40px;">
          <!-- 年份选项 -->
          <option value="1990">1990</option>
          <option value="1991">1991</option>
          <option value="1992">1992</option>
          <!-- 更多年份 -->
      </select>
      <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 29%; height: 40px;">
          <!-- 月份选项 -->
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <!-- 更多月份 -->
      </select>
      <select style="border:none;border-bottom:1px solid #afadad; width: 38%; height: 40px;">
          <!-- 日期选项 -->
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <!-- 更多日期 -->
      </select>
      </div>
      <!-- 性别 -->
      <div style="font-weight:700; margin-top:30px; margin-bottom:10px ;">性别</div>
      <label for="male" style="margin-right:20px;">
          <input type="radio" id="male" name="gender" value="male"> 男
      </label>
      <label for="female">
          <input type="radio" id="female" name="gender" value="female"> 女
      </label>

      <button style="width: 100%; height: 35px; color:#fff; margin-top:30px; border:1px solid #000; background-color: #000; border-radius:10px;">註冊</button>
      <div style="margin-top:20px;">
        <span style="margin-top:20px; ">已經有帳戶？</span>
        <u @click="toLOGIN" style="margin-top:10px; font-weight: 700;">立即登入</u>
      </div>
    </div>
    <KOfooter/>
  </div>
  <div v-else>
    <KOheader/>
    <div style="margin: 50px auto; width: 94%; margin-left: 20px;">
      <div style="font-size:25px;font-weight: 700;">註冊一個新帳戶</div>
      <button style="display: flex; align-items: center; justify-content:space-between;  margin-top:20px ; border:1px solid #eeecec; border-radius: 10px; width: 90%; height: 40px;background-color: #fff;">
        <img style="width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/fb_circle.png" alt="">
        <div>使用Facebook登入</div>
        <div></div>
      </button>
      <div style="margin-top:20px; text-align: center;">或</div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="text" placeholder="姓名＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="text" placeholder="電子信箱＊">
      </div>
      <div style="margin-top:20px ; color:#757575;">＊ 請以「小寫」填寫電子信箱。</div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="text" placeholder="確認電子信箱地址＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="password" placeholder="密码＊">
      </div>
      <div style="margin-top:30px;">
        <input style="border:none;border-bottom:1px solid #afadad; width: 90%; height: 40px;" type="password" placeholder="確認密碼＊">
      </div>
      <div style="margin-top:20px;">
        <div style="font-weight:700;">國家/地區</div>
        <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 27%; height: 40px;">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="japan">日本</option>
            <!-- 更多选项 -->
        </select>
        <input style="border:none;border-bottom:1px solid #afadad; width: 59%; height: 40px;" type="text" placeholder="手機＊"/>
      </div>
      <div style="margin-top:20px;">
      <div style="font-weight:700;">出生年月日</div>
      <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 26%; height: 40px;">
          <!-- 年份选项 -->
          <option value="1990">1990</option>
          <option value="1991">1991</option>
          <option value="1992">1992</option>
          <!-- 更多年份 -->
      </select>
      <select style="border:none;border-bottom:1px solid #afadad; margin-right:2%; width: 26%; height: 40px;">
          <!-- 月份选项 -->
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <!-- 更多月份 -->
      </select>
      <select style="border:none;border-bottom:1px solid #afadad; width: 32%; height: 40px;">
          <!-- 日期选项 -->
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <!-- 更多日期 -->
      </select>
      </div>
      <!-- 性别 -->
      <div style="font-weight:700; margin-top:30px; margin-bottom:10px ;">性别</div>
      <label for="male" style="margin-right:20px;">
          <input type="radio" id="male" name="gender" value="male"> 男
      </label>
      <label for="female">
          <input type="radio" id="female" name="gender" value="female"> 女
      </label>

      <button style="width: 90%; height: 35px; color:#fff; margin-top:30px; border:1px solid #000; background-color: #000; border-radius:10px;">註冊</button>
      <div style="margin-top:20px;">
        <span style="margin-top:20px; ">已經有帳戶？</span>
        <u @click="toLOGIN" style="margin-top:10px; font-weight: 700;">立即登入</u>
      </div>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped></style>